<template>
  <div id="main">
    <div id="sidebar">
      <div v-if="userInfo.accesstoken" class="panel">
        <div class="header">
          <span class="col_fade">个人信息</span>
        </div>
        <div class="inner">
          <div class="user_card">
            <div>
              <NuxtLink class="user_avatar" :to="'/user/'+userInfo.loginname">
                <img :src="userInfo.avatar_url" title="webPan">
              </NuxtLink>
              <span class="user_name"><a class="dark" href="/user/webPan">{{userInfo.loginname}}</a></span>
              <div class="space clearfix"></div>
              <span class="signature"> “世上无难事，只怕有心人。”</span>
            </div>
          </div>
        </div>
      </div>
      <div class="panel">
        <div class="header">
          <span class="col_fade">关于</span>
        </div>
        <div class="inner">
          <p>CNode：Node.js专业中文社区</p>
          <p>在这里你可以：</p>
          <ul>
            <li>向别人提出你遇到的问题</li>
            <li>帮助遇到问题的人</li>
            <li>分享自己的知识</li>
            <li>和其它人一起进步</li>
          </ul>
        </div>
      </div>
    </div>
    <div id="content">
      <div class="panel">
        <div class="header">
          <ul class="breadcrumb">
            <li><a href="/">主页</a><span class="divider">/</span></li>
            <li class="active">{{!userInfo.accesstoken?'登录':'用户信息'}}</li>
          </ul>
        </div>
        <div class="inner">
          <div v-if="!userInfo.accesstoken" id="signin_form" class="form-horizontal" style="padding: 50px 0;">
            <div class="control-group">
              <div class="controls">
                <input class="input-xlarge" v-model="accesstoken" placeholder="请输入你的token"  type="text"> <button @click="handleLogin" style="padding: 0px 5px" class="span-primary">登录</button>
              </div>
            </div>
          </div>
          <div v-else class="user-info">
            <p>ID：{{userInfo.id}}</p>
            <p>头像：{{userInfo.avatar_url}}</p>
            <p>名称：{{userInfo.loginname}}</p>
            <button @click="handleLogOut" style="padding: 0px 5px" class="span-primary">退出</button>
          </div>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
  import {accesstoken} from "../../assets/js/api";
  import {mapGetters } from 'vuex'

  export default {
    name: "login",
    head(){
      return {
        title:'用户登录'
      }
    },
    data(){
      return {
        accesstoken :'13c4cb32-5a13-4d19-a10f-9c73c5591338',
      }
    },
    computed:{
      ...mapGetters({
        userInfo:'user/userInfo'
      })
    },
    methods:{
      handleLogin(){
       accesstoken({axios:this.$axios,accesstoken:this.accesstoken}).then((data)=>{
         let {id,avatar_url,loginname} = data;
         let userInfo = {
           id,
           avatar_url,
           loginname,
           accesstoken:this.accesstoken
         }
         this.$cookies.set('userInfo',JSON.stringify(userInfo),{
           path: '/',
           maxAge: 60 * 60 * 24 * 7
         });
         this.$store.dispatch('user/SetUserInfo',userInfo);
         this.$_toast('登录成功')
       })
      },
      handleLogOut(){
        this.$cookies.remove('userInfo');
        this.$store.dispatch('user/SetUserInfo',{
          id:'',
          avatar_url:'',
          loginname:'',
          accesstoken:''
        });
        this.$_toast('退出成功')
      }
    },
    mounted() {
      console.log(this.$cookies)
      console.log(this.$store.getters['user/userInfo'])
    }
  }
</script>

<style lang="scss" scoped>
  .user-info{
    h2{font-size: 18px;}
  }
</style>
